<template>
	<view>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(record, index) in repairsRecordVo.pageBean.data" :key="index">
				<u-cell value="" :label="'报修位置:'+record.repPlace+',报修类别:'+record.repType">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text">{{record.repNum}}</text>
						<view>
							<u-tag plain size="mini" color="red" border-color="red" v-if="record.repStatus == 0"
								text="待分配" @click="handle(record, index)"></u-tag>
							<u-tag plain size="mini" type="error" v-else-if="record.repStatus == 1" text="待接单"
								@click="handle(record, index)"></u-tag>
							<u-tag plain size="mini" type="warning" v-else-if="record.repStatus == 2" text="等待维修"
								@click="handle(record, index)">
							</u-tag>
							<u-tag plain size="mini" type="success" v-else-if="record.repStatus == 3" text="已完成">
							</u-tag>
							<u-tag plain size="mini" color="gray" border-color="gray" v-else-if="record.repStatus == 4"
								text="已取消"></u-tag>
							<u-tag plain size="mini" v-else="record.repStatus == 5" text="待评价"
								@click="handle(record, index)">
							</u-tag>
						</view>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>

		<u-popup :show="showAppraise" @close="showAppraise = false" mode="top">
			<view style="height: 300px;margin: 20px;">
				<u--form labelPosition="left" :model="appraiseVo" ref="form1">
					<u-form-item label="评价内容:" labelWidth="80px" prop="appraise" borderBottom ref="item1">
						<u--textarea maxlength="100" :confirmType="null" v-model="appraiseVo.appraise"
							placeholder="请输入内容" count></u--textarea>
					</u-form-item>
					<u-form-item label="评分:" labelWidth="80px" prop="score" borderBottom>
						<uni-rate :max="5" :value="appraiseVo.score" @change="scoreChange" />
					</u-form-item>
				</u--form>
				<u-button type="primary" text="提交" customStyle="margin-top: 20%;width: 30%" @click="submit"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showMaintenance" @close="showMaintenance = false">
			<view style="height: 200px;margin: 15px;">
				<uni-section title="维修人" type="line" titleFontSize="20px">
					<u--text size="30" :call="true" mode="phone" :text="maintenance.name"></u--text>
				</uni-section>
				<uni-section title="联系方式" type="line" titleFontSize="20px">
					<u--text size="30" :call="true" mode="phone" :text="maintenance.mtPhone"></u--text>
					<text style="margin-left:10px;color: blue">点击拨打电话</text>
				</uni-section>
			</view>
		</u-popup>
		<u-modal @cancel="showConfirm = false" @confirm="cancelRepairs" title="警告" content="确定取消报修吗？"
			:show="showConfirm" :zoom="false" :showCancelButton="true" confirmColor="#ff0000"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMaintenance: false,
				showConfirm: false,
				repairsRecordVo: {
					repNumWord: "",
					personWord: "",
					startTime: "",
					endTime: "",
					mtWord: "",
					repStatus: "",
					pageBean: {
						currPage: 0,
						pageSize: 10,
						totalNum: 0,
						data: [],
					},
				},
				showAppraise: false,
				appraiseSize: 100,
				appraiseVo: {
					repairsId: "",
					appraise: "",
					score: 0,
				},
				alterIndex: "",
				maintenance: {
					name: "",
					mtPhone: "",
				},
			}
		},
		onLoad() {
			this.loadmore()
			//this.getData()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				this.repairsRecordVo.pageBean.currPage = this.repairsRecordVo.pageBean.currPage + 1;
				this.getData()
			},
			getData() {
				this.$axios.post("/bx/record/list", this.repairsRecordVo).then((r) => {
					if (r.data.code == 200) {
						this.repairsRecordVo.pageBean.totalNum = r.data.data.totalNum;
						this.repairsRecordVo.pageBean.data = r.data.data.data;
					}
				});
			},
			handle(record, index) {
				this.alterIndex = index;
				if (record.repStatus == 5) {
					this.showAppraise = true;
				} else if (record.repStatus == 2) {
					this.showMaintenance = true;
					this.maintenance.name = this.repairsRecordVo.pageBean.data[this.alterIndex].maintenance;
					this.maintenance.mtPhone = this.repairsRecordVo.pageBean.data[this.alterIndex].mtPhone;
				} else {
					this.showConfirm = true;
				}
			},
			scoreChange(e) {
				this.appraiseVo.score = e.value;
			},
			submit() {
				this.appraiseVo.repairsId = this.repairsRecordVo.pageBean.data[this.alterIndex].id;
				if (this.appraiseVo.score == 0 || this.appraiseVo.appraise == "") {
					uni.showToast({
						title: '填写参数有误',
						icon: 'fail'
					});
					return;
				}
				this.$axios.post("/bx/record/update/appraise", this.appraiseVo).then(r => {
					if (r.data.code == 200) {
						uni.showToast({
							title: '评价成功',
							icon: 'success'
						});
						this.repairsRecordVo.pageBean.data[this.alterIndex].repStatus = 3;
						this.showAppraise = false;
					}
				});
			},
			cancelRepairs() {
				let repairsId = this.repairsRecordVo.pageBean.data[this.alterIndex].id;
				this.$axios.post("/bx/record/update/cancel?repairsId=" + repairsId).then(r => {
					if (r.data.code == 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						});
						this.repairsRecordVo.pageBean.data[this.alterIndex].repStatus = 4;
						this.showConfirm = false;
					}
				})
			},
		},



	}
</script>

<style lang="scss">
	.u-popup-slot {
		width: 200px;
		height: 300px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}

	.u-cell-text {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
		margin-right: 5px;
	}
</style>
